<template>
  <Banner />
  <div class="container">
    <div class="title mytit">
      {{ course.one?.courseTitle || '' }}
    </div>
    <div class="big-img" @click="navDetail(chapter.freeList[0]?.courseId)">
      <el-image
        class="img"
        :src="chapter.freeList[0]?.chapterCover"
        fit="cover"
      ></el-image>
      <img class="play" :src="play" alt="" />
    </div>
    <div class="course-imgs">
      <div
        v-for="item of chapter.freeList"
        :key="item.chapterId"
        class="course-img"
        @click="navDetail(item?.courseId)"
      >
        <el-image
          :src="item?.chapterCover"
          :alt="item?.chapterCname"
          :title="item?.chapterCname"
          class="img"
          fit="cover"
        ></el-image>
      </div>
    </div>
    <div class="tit mytit">主讲介绍人</div>
    <div class="speaker desc" v-text="course.one?.lecturerBlurb"></div>
    <div class="tit mytit">课程内容</div>
    <div class="course-desc desc" v-text="course.one?.courseBlurb"></div>
    <div class="tit mytit">章节列表</div>
    <course-list :list="chapter.list" @navDetail="handleDetail"></course-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Banner from 'components/Banner/index.vue'
import CourseList from './CourseList/index.vue'
import courseImg from '@/assets/images/course-img.png'
import play from '@/assets/images/play.png'
import courseApis from 'apis/course'
import { IChapter } from 'apis/types/course'
import router from '@/router'
export default defineComponent({
  name: 'Home',
  components: {
    Banner,
    CourseList,
  },
  setup() {
    const router = useRouter()
    let course = reactive({
      one: {},
    })
    let chapter = reactive({
      list: [],
      freeList: [] as IChapter[],
    })
    onMounted(() => {
      getCourse()
    })
    // 获取课程列表
    const getCourse = async () => {
      const { data } = await courseApis.getCourse({
        moduleId: '581',
        pNo: 1,
        pSize: 100,
      })
      if (data?.data && data.data.length > 0) {
        // course.list = data.data
        course.one = data.data[0]
        getChapter(data.data[0].courseId)
      }
    }
    // 获取免费列表
    const getFreeList = (data: IChapter[]) => {
      const result = data
        .filter((item: IChapter) => item.payShow === 0)
        .slice(0, 6)
      chapter.freeList = result
    }
    // 获取章节列表
    const getChapter = async (id: number) => {
      const { data } = await courseApis.getChapter({
        courseId: id,
      })
      if (data && data.length > 0) {
        getFreeList(data)
        chapter.list = data
      }
    }

    const handleDetail = (item: IChapter) => {
      navDetail(item.courseId, item.chapterId)
    }

    const navDetail = (id: number, chapterId: number) => {
      router.push({
        path: `/detail/${id}`,
        query: {
          chapterId,
        },
      })
    }
    return {
      play,
      courseImg,
      course,
      chapter,
      navDetail,
      handleDetail,
    }
  },
})
</script>

<style lang="scss" scoped>
@import './index.style.scss';
</style>
